<template>
  <div class="answer">
    <template>
      <div class="container">
        <div class="content">
          <div class="con_head">
            <div class="title">{{ detail.sole }}</div>
            <div class="score">
              <span>{{ active + 1 }}</span
              >/{{ mulList.length }}
            </div>
          </div>
          <div class="con_text">
            <div class="title_topic">
              {{ detail.topic }}
            </div>
            <!-- 单选题 区域 -->
            <div
              v-if="
                detail.sole === '单选题' ||
                  detail.sole === '判断题' ||
                  detail.choice === '单选题'
              "
            >
              <div
                v-for="(item, index) in detail.arr"
                :key="index"
                @click="SoleAdd(item)"
                class="con_odd"
                :class="{
                  active: detail.value == item.value,
                  success: detail.answer == item.value && detail.ischecked,
                  error:
                    item.value == detail.value &&
                    detail.answer !== item.value &&
                    detail.ischecked,
                }"
              >
                <p>{{ item.value }}、{{ item.name }}</p>
              </div>
            </div>

            <!-- 多选题区域 -->
            <div v-if="detail.sole === '多选题' || detail.choice === '多选题'">
              <div
                v-for="(item, index) in detail.arr"
                :key="index"
                class="con_odd"
                @click="moreClick(item)"
                :class="{ active: item.checked }"
              >
                <p>{{ item.value }}、{{ item.name }}</p>
              </div>
            </div>

            <!-- 视频区域 -->
            <div v-if="detail.sole === '视频题' || detail.sole === '图片题'">
              <img :src="detail.img" alt="" />
            </div>

            <!-- 填空题区域 -->
            <div v-if="detail.sole === '填空题'">
              <div>
                <div class="gap_one" v-for="(v, i) in detail.arr" :key="i">
                  <p>{{ v.title }}</p>
                  <div class="head_gap">
                    <input
                      :class="
                        item.value ? (item.isYes ? 'isYes' : 'isError') : ''
                      "
                      maxlength="1"
                      v-model="item.value"
                      v-for="(item, index) in v.values"
                      :key="index"
                      type="text"
                    />
                  </div>
                </div>
              </div>
              <div class="gap_result" v-if="detail.ischecked">
                正确答案：
                <div v-for="(item, index) in detail.answer" :key="index">
                  <span>{{ item.join("") }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="nextss" v-if="lastAnser" @click="save">完成</div>
        <!-- 下一题按钮 -->
        <div
          class="nextss"
          @click="NextAdd"
          :class="{ disabled: !isnext }"
          v-else
          v-show="!show"
        >
          {{ steclude ? "点击回答问题" : "下一题" }}
        </div>
      </div>
    </template>

    <!-- 多选题弹框区域 -->
    <div v-show="show">
      <div class="bg_log"></div>
      <div class="log_text">
        <div
          class="title"
          :class="titleName == '恭喜您，您答对了!' ? 'success' : 'error'"
        >
          {{ titleName }}
        </div>
        <div class="text">
          <p class="one_p">
            正确答案为<span>{{ detail.result && detail.result.join("") }}</span>
          </p>
          <div class="one_resu">
            <p v-for="(item, index) in spams" :key="index">{{ item }}</p>
          </div>
          <div class="two_retu" @click="goClick">返回</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      settime: null,
      active: 0,
      spams: [],
      titleName: "",
      show: false,
      mulList: [
        {
          type: 1,
          sole: "单选题",
          value: null,
          ischecked: false,
          answer: "A",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          type: 1,
          sole: "单选题",
          value: null,
          ischecked: false,
          answer: "A",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          type: 2,
          sole: "多选题",
          value: null,
          ischecked: false,
          answer: "B",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(多选题)",
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
          result: ["A", "C"],
        },
        {
          type: 3,
          sole: "判断题",
          value: null,
          ischecked: false,
          answer: "B",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(判断题)",
          arr: [
            { name: "正确", value: "A" },
            { name: "错误", value: "B" },
          ],
          result: ["A", "C"],
        },
        {
          type: 1,
          sole: "单选题",
          value: null,
          ischecked: false,
          answer: "A",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          type: 5,
          sole: "视频题",
          value: null,
          ischecked: false,
          topic: "3、请观看视频回答问题",
          img: require("../assets/image/1.video.png"),
        },
        {
          type: 2,
          sole: "视频题",
          choice: "多选题",
          value: null,
          ischecked: false,
          answer: "B",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(多选题)",
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
          result: ["A", "C"],
        },
        {
          type: 1,
          sole: "视频题",
          choice: "单选题",
          value: null,
          ischecked: false,
          answer: "A",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          type: 5,
          sole: "图片题",
          value: null,
          ischecked: false,
          topic: "3、请观看图片回答问题",
          img: require("../assets/image/1.video.png"),
        },
        {
          type: 2,
          sole: "图片题",
          choice: "多选题",
          value: null,
          ischecked: false,
          answer: "B",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(多选题)",
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
          result: ["A", "C"],
        },
        {
          type: 1,
          sole: "图片题",
          choice: "单选题",
          value: null,
          ischecked: false,
          answer: "A",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          type: 5,
          sole: "填空题",
          value: null,
          ischecked: false,
          answer: [
            [1, 2, 3, 4],
            [6, 7, 8, 9],
          ],
          topic:
            "2.墙面装饰分为________和________，不同的墙面有着不同的装饰效果和功能。(填空题)",
          arr: [
            {
              title: "填空一",
              values: [
                { value: "1", isYes: false },
                { value: "2", isYes: false },
                { value: "3", isYes: false },
                { value: "5", isYes: false },
              ],
            },
            {
              title: "填空二",
              values: [
                { value: "6", isYes: false },
                { value: "8", isYes: false },
                { value: "7", isYes: false },
                { value: "9", isYes: false },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {
    //判断是否完成
    lastAnser() {
      return this.active == this.mulList.length - 1 && this.detail.ischecked;
    },
    detail() {
      return this.mulList[this.active];
    },

    //判断题目是否有勾选  如果勾选就可以下一步
    isnext() {
      let state = false;
      if (this.detail.sole == "多选题" || this.detail.choice == "多选题") {
        //多选是否勾选
        state = this.detail.arr.filter((item) => item.checked).length;
      } else if (this.steclude) {
        state = true; //如果是图片或视频题 显示
      } else if (this.detail.sole == "填空题") {
        if (
          this.detail.arr
            .map((x) => x.values)
            .flat()
            .every((x) => x.value)
        ) {
          //所有输入框值不为空
          state = true;
        }
      } else {
        state = this.detail.value; //等于data中value状态
      }
      return state;
    },
    steclude() {
      return this.mulList[this.active].img;
    },
  },
  methods: {
    // 单选
    SoleAdd(item) {
      if (this.detail.ischecked) return;
      if (this.detail.value == item.value) {
        this.detail.value = null;
      } else {
        this.detail.value = item.value;
      }
    },
    //下一步
    NextAdd() {
      //如果没选择 啥都不做呗
      if (!this.isnext) {
        return;
      }
      // 显示结果
      this.detail.ischecked = true;
      //多选事件
      if (this.detail.sole == "多选题" || this.detail.choice == "多选题") {
        let result = this.detail.arr.filter((item) => item.checked == true);
        this.show = true;
        this.spams = result.map((item) => item.value + "、" + item.name);
        if ( result.map((x) => x.value).toString() == this.detail.result.toString()) {
          this.titleName = "恭喜您，您答对了!";
        } else {
          this.titleName = "很遗憾，您答错了！";
        }
        return;
      } else if (this.detail.sole == "填空题") {
        this.detail.arr.forEach((x, i) => {
          x.values.forEach((l, o) => {
            if (l.value == this.detail.answer[i][o]) {
              l.isYes = true;
            }
          });
        });
      }
      if (!this.lastAnser) {
        //防抖
        if (this.settime) {
          clearTimeout(this.settime);
        }
        this.settime = setTimeout(() => {
          this.active += 1;
        }, 1000);
      }
    },
    // 多选弹框返回
    goClick() {
      this.show = false;
      this.spams = [];
      this.active += 1;
    },
    // 多选
    moreClick(item) {
      if (this.detail.ischecked) return;
      item.checked = !item.checked;
    },
    //完成
    save() {
      this.$router.push("/result");
    },
  },
};
</script>
<style lang="scss" scoped>
.answer {
  .container {
    padding: 2.375rem 0.875rem 3.8125rem;

    .content {
      width: 100%;
      height: 33.125rem;
      background-color: #fff;
      border-radius: 0.3125rem;
      margin-bottom: 2.8125rem;

      .con_head {
        display: flex;
        justify-content: space-between;
        padding-right: 1.5625rem;

        .title {
          background-image: url("../assets/image/title_icon.png");
          background-position: center;
          background-size: cover;
          width: 7.625rem;
          height: 2.625rem;
          line-height: 2.625rem;
          padding-left: 1.75rem;
          color: #fff;
          margin-top: -0.5rem;
        }

        .score {
          margin-top: 1.1rem;
          font-size: 1.125rem;
          color: #999;

          span {
            color: #d42454;
          }
        }
      }

      .con_text {
        padding: 0rem 1rem;
        color: #333;

        .title_topic {
          margin: 0.9375rem 0rem 1.875rem;
        }

        .con_odd {
          color: #333;
          border: 0.0625rem solid #979797;
          border-radius: 0.3125rem;
          margin-bottom: 1.25rem;
          height: 3.125rem;
          display: flex;
          align-items: center;
          padding-left: 1rem;
        }

        .active {
          color: #fff;
          background-color: #f1727c;
          border: 0;
        }

        .success,
        .isYes {
          color: #00862a;
          border: 1px solid #00862a !important;
          position: relative;
        }

        .success {
          background-color: #fff;
        }

        .success::before {
          content: "";
          background: url("../assets/image/success_icon.png") no-repeat;
          position: absolute;
          display: inline-block;
          height: 1rem;
          width: 1rem;
          top: 57%;
          transform: translateY(-50%);
          background-color: #fff;
          padding: 0.1875rem;
        }

        .error,
        .isError {
          border: 1px solid #d81e06 !important;
          color: red;
          position: relative;
        }

        .error {
          background-color: #fff;
        }

        .error::before {
          content: "";
          background: url("../assets/image/error_icon.png") no-repeat;
          position: absolute;
          display: inline-block;
          height: 1rem;
          width: 1rem;
          top: 57%;
          transform: translateY(-50%);
          background-color: #fff;
          padding: 0.1875rem;
        }

        .gap_one {
          margin-bottom: 1.75rem;

          p {
            margin-bottom: 0.5625rem;
          }

          .head_gap {
            input {
              width: 2.1875rem;
              height: 2.1875rem;
              outline: 0;
              border-radius: 0.3125rem;
              border: 1px solid #979797;
              font-size: 1.125rem;
              text-align: center;
              line-height: 2.1875rem;
              margin-right: 0.5625rem;
            }
          }
        }

        .gap_result {
          background: #f2f2f7;
          display: flex;
          padding: 0.4375rem 0.5625rem;
          border-radius: 0.3125rem;

          div:not(:first-child) {
            margin-left: 2.5rem;
          }

          span {
            color: #0b8b33;
          }
        }
      }
    }

    .nextss {
      width: 18.0625rem;
      height: 3.125rem;
      border-radius: 0.3125rem;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      background: #d42454;
      position: sticky;
      bottom: 0;
    }

    .disabled {
      background: #efafc0;
    }
  }

  .bg_log::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #979797;
    opacity: 0.6;
    top: 0;
    left: 0;
    position: fixed;
  }

  .log_text {
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    height: 22.25rem;
    width: 80%;
    border-radius: 0.3125rem;

    .title {
      padding: 1.875rem 0rem 1.5625rem;
      border-bottom: 2px solid #ececec;
      font-size: 1.25rem;
      text-align: center;
    }

    .error {
      color: #f1727c;
    }

    .success {
      color: #00862a;
    }

    .text {
      text-align: center;
      padding-top: 1.5625rem;

      .one_p {
        font-size: 1.25rem;
        color: #00862a;
        padding-bottom: 1.6875rem;
      }

      .one_resu {
        margin-left: 3.25rem;
        color: #333333;
        text-align: left;

        p {
          width: 100%;
        }
      }

      .two_retu {
        height: 3.125rem;
        width: 9.375rem;
        display: inline-block;
        text-align: center;
        line-height: 3.125rem;
        color: #fff;
        font-size: 1.25rem;
        background: #d42454;
        border-radius: 5px;
        margin-top: 3.3125rem;
      }
    }
  }
}
</style>
